中文网:https://www.bootcss.com/

一.介绍和使用
1.什么是Bootstrap
    css库
    js库
        jq插件依赖==>jquery
2.Bootstrap可以干什么
    可以做响应式网站(简单)
3.获取和使用
    下载:https://v3.bootcss.com/getting-started/#download
    css:放入样式
    js:插件
    fonts:字体图标

二.布局容器
    container        ==>80%
    container-fluid  ==>100%
    注意:这两种容器类不能互相嵌套

三.排版
1.标题
    class="h1,h2,h3..."
2.页面主体
    body{
        font-size:14px;
        line-height:1.428; 
    }
    P{
        margin:0 0 10px;
    }
3.中心内容(突出)
    class="lead"
4.文字对齐  ---重点
    class="text-center"
    class="text-left"
    class="text-right"

四.代码(pre)

五.表格(table)
    class="table"
1.响应式表格
    class="table-responsive"   ---重点
2.响应式图片
    class="img-responsive"


.active	    鼠标悬停在行或单元格上时所设置的颜色
.success	标识成功或积极的动作-绿
.info	    标识普通的提示信息或动作-蓝
.warning	标识警告或需要用户注意-黄
.danger	    标识危险或潜在的带来负面影响的动作-红


六.表单(form)
input要配合label使用
bootstrap:
    横向排列的表单:form-inline
    水平排列的表单:form-horizontal
    input美观:form-control
    链接:
    <div class="input-group"></div>

七.按钮(btn)
    尺寸:lg sm xs 

八.图片(img)
    响应式图片:img-responsive
    图片居中:center-block

九.辅助类
    浮动:左pull-left  右pull-right
    清除浮动:clearfix
    居中:center-block
    显示:show
    隐藏:hidden

十.响应式工具
    visible    ==>可见
    visible-xs ==>小于768px
    visible-sm ==>大于等于768px
    visible-md ==>大于等于992px
    visible-lg ==>大于等于1200px

    hidden     ==>不可见
    hidden-xs  ==>小于768px
    hidden-sm  ==>大于等于768px
    hidden-md  ==>大于等于992px
    hidden-lg  ==>大于等于1200px
    
十一.bootstrap-栅格系统-参数布局
    Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。
简介:
    栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
注意:
    1》“行（row）”必须包含在 .container（固定宽度）或.container-fluid 100% 宽度）中,
        以便为其赋予合适的排列（aligment）和内补（padding）。
    2》类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。
        Bootstrap 源码中定义的 mixin 也可以用来创建语义化的布局。
    3》col-lg-6
        col ==>列
        lg  ==>尺寸
        6   ==>占用空间的6份

十二.bootstrap-栅格系统-偏移-嵌套-排序
1.列偏移
    col-lg-offset-4
2.嵌套列
    <div class="row">
        <div class="col-md-9">
        <div class="row">
            <div class="col-md-3"></div>
            <div class="col-md-3"></div>
        </div>
        </div>
    </div>
3.列排序

十三.bootstrap-栅格系统-响应式图片

十四.bootstrap-栅格系统-案例-网站实战

十五.bootstrap-组件-字体图标
1.组件:
    必须引入bootstrap.js ==>jquery的插件
2.字体图标:
    必须引入fonts目录
注意:
    不要和其他组件混合使用
    只对内容为空的元素起作用

十六.bootstrap-组件-下拉菜单
1.将下拉菜单触发器和下拉菜单都包裹在 .dropdown 里，或者另一个声明了 position: relative;的元素。
  然后加入组成菜单的 HTML 代码。
2.点击谁:需要给元素加入自定义属性
    data-toggle="属性名称"
3.显示谁:加入类
    class="dropdown-menu"

十七.bootstrap-组件-按钮组
1.打成一个组:在外部加<div class="btn-group"></div>
2.尺寸:btn-group-lg ,md ,sm ,xs
3.嵌套:
    <div class="btn-group">
        <div class="btn-group"></div>
    </div>
4.排列:
    垂直排列:btn-group-vertical
5.两端对齐排列的按钮组:
    btn-group-justified

十八.bootstrap-组件-输出框组
输入框组:
注意:
    1》通过在文本输入框 <input> 前面、后面或是两边加上文字或按钮，可以实现对表单控件的扩展。
       为 .input-group 赋予 .input-group-addon 或 .input-group-btn 类，
       可以给 .form-control 的前面或后面添加额外的元素。
    2》为输入框组添加按钮需要额外添加一层嵌套，不是 .input-group-addon，而是添加 .input-group-btn 来包裹按钮元素。
       由于不同浏览器的默认样式无法被统一的重新赋值，所以才需要这样做。
    3》不要将表单组或栅格列（column）类直接和输入框组混合使用。
       而是将输入框组嵌套到表单组或栅格相关元素的内部。
1.基本实例和尺寸
2.作为额外元素的多选框和单选框
3.作为额外元素的按钮
4.作为额外元素的按钮式下拉菜单

十九.bootstrap-组件-导航
    Bootstrap 中的导航组件都依赖同一个 .nav 类，状态类也是共用的。改变修饰类可以改变样式。

二十.bootstrap-组件-导航条(navbar)
    navbar-default ==>默认样式
注意:
    1》.navbar-brand 已经被设置了内补（padding）和高度（height），你需要根据自己的情况添加一些 CSS 代码从而覆盖默认设置。
    2》固定在头部:navbar-fixed-top 
        默认有50px高度

二十一.bootstrap-组件-路径导航-分页
1.路径导航：breadcrumb
    首页==>新闻==>娱乐新闻
2.分页:pagination

二十二.bootstrap-组件-标签-徽章
1.标签:label label-default
2.徽章:<span class="badge"></span>

二十三.bootstrap-组件-巨幕-页头
1.巨幕(jumbotron)
    这是一个轻量、灵活的组件，它能延伸至整个浏览器视口来展示网站上的关键内容。
2.页头(page-header)
    场景:文章|列表

二十四.bootstrap-组件-缩略图(thumbnail)
    要配合栅格系统来使用

二十五.bootstrap-组件-警告框(alert)
    可关闭的警告框:需要加入alert-dismissible
    内容部分:右侧的关闭按钮或者字体图标,需要加入:close
    关闭功能,需要加入自定义属性:data-dismiss="alert"

二十六.bootstrap-组件-进度条(progress)
progress-bar

二十七.bootstrap-组件-媒介对象(media)
media-left
media-right 
media-body

二十八.bootstrap-组件-列表组(list-group)
list-group-list

二十九.bootstrap-组件-面板(panel)

三十.bootstrap-组件-响应式嵌入式内容

三十一.bootstrap-JavaScript插件-模态框

三十二.bootstrap-JavaScript插件-下拉菜单

三十三.bootstrap-JavaScript插件-滚动监听

三十四.bootstrap-JavaScript插件-标签页

三十五.bootstrap-JavaScript插件-工具提示

三十六.bootstrap-JavaScript插件-弹出框-警告框-按钮

三十七.bootstrap-JavaScript插件-折叠-collapse

三十八.bootstrap-JavaScript插件-Carousel-Affix




